<template>
 <view class="userInfo">
 	<image class="userPic" :src="userInfoByWx.headimgurl" mode="aspectFit"></image>
 	<view class="userName">
 		{{userInfoByWx.nickname}}
 	</view>
 	<button type="default" @click="toWxLogin()">
		<image class="wxLogo" src="../../static/icon/wxLogo.png" mode="aspectFill"></image> 微信登录
	</button>
 	<button type="primary" @click="logout()">退出登录</button>
 </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from 'vuex';
 const store = useStore();
 //通过vuex 进行微信登入操作
 const toWxLogin=()=>{
	 store.dispatch('user/userLoginByWx');
 };
 //vuex 获取用户名称	
const userInfoByWx=computed(()=>{
	let { userInfo } = store.state.user;
	let nickname = userInfo ? userInfo.nickname : '未登录';
	let headimgurl = userInfo ? userInfo.headimgurl : '../../static/user/user.png';
	return {nickname ,headimgurl};
});
const logout=()=>{
	store.dispatch('user/logout');
}
</script>

<style lang="scss" scoped>
.userInfo {
	padding-top: 30%;
}
.userInfo .userPic {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	width: 300upx;
	height: 300upx;
}
.wxLogo {
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.userName {
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	line-height: 2rem;
	color: lightskyblue;
	font-size: 2rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
button {
	margin-bottom: 2rem;
}

</style>
